// Variables
$font-primary: 'Open Sans', Arial, sans-serif;

$brand-primary: #33cccc;
$brand-black: #000000;
$brand-white: #ffffff;

$screen-lg: 1200px;
$screen-md: 992px;
$screen-sm: 768px;
$screen-xs: 480px;

// Mixin
@mixin fh5co-translateX($translatex) {
  -moz-transform: translateX($translatex);
  -webkit-transform: translateX($translatex);
  -ms-transform: translateX($translatex);
  -o-transform: translateX($translatex);
  transform: translateX($translatex);
}

@mixin transition($transition, $ease: 'ease') {
  -moz-transition: all $transition unquote($ease);
  -o-transition: all $transition unquote($ease);
  -webkit-transition: all $transition unquote($ease);
  -ms-transition: all $transition unquote($ease);
  transition: all $transition unquote($ease);
}

@mixin inline-block() {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin box-shadow-none() {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

/* =======================================================
*
* 	Template Style 
*	Edit this section
*
* ======================================================= */

// Template Base

body {
  font-family: $font-primary;
  line-height: 1.5;
  font-size: 16px;
  color: #848484;
  background-color: lighten(#e3e3e3, 5%);
  &.style-2 {
    background-color: $brand-white;
    background-size: cover;
    background-position: -30% center;
    background-repeat: no-repeat;
    background-image: url(../images/bg_2.jpg);
    height: 100%;
  }
  &.style-3 {
    background: $brand-white url(../images/geometry2.png) repeat;
  }
}

a {
  color: $brand-primary;
  @include transition(.3s);
  &:hover {
    color: darken($brand-primary, 10%);
  }
}

.menu {
  padding: 0;
  margin: 30px 0 0 0;
  li {
    list-style: none;
    margin-bottom: 10px;
    @include inline-block;
    a {
      padding: 5px;
    }
    &.active {
      a {
        color: lighten($brand-black, 70%);
      }
    }
  }
}

.fh5co-form {
  padding: 30px;
  margin-top: 4em;
  -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
  -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
  box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
  background: $brand-white;
  .style-2 & {
    -webkit-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    -o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
    box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
  }
  @media screen and (max-width: $screen-sm) {
    padding: 15px;
  }
  h2 {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    margin: 0 0 30px 0;
    color: $brand-black;
  }
  .form-group {
    margin-bottom: 30px;
    p {
      font-size: 14px;
      color: #9f9f9f;
      font-weight: 300;
      a {
        color: $brand-black;
      }
    }
  }
  label {
    font-weight: 300;
    font-size: 14px;
    font-weight: 300;
  }
  .form-control {
    font-size: 16px;
    font-weight: 300;
    height: 50px;
    padding-left: 0;
    padding-right: 0;
    border: none;
    border-bottom: 1px solid rgba($brand-black, .1);
    @include box-shadow-none;
    @include border-radius(0px);
    @include transition(.3s);
    &::-webkit-input-placeholder {
      color: rgba($brand-black, .3);
      text-transform: uppercase;
    }
    &::-moz-placeholder {
      color: rgba($brand-black, .3);
      text-transform: uppercase;
    }
    &:-ms-input-placeholder {
      color: rgba($brand-black, .3);
      text-transform: uppercase;
    }
    &:-moz-placeholder {
      color: rgba($brand-black, .3);
      text-transform: uppercase;
    }
    &:focus, &:active {
      border-bottom: 1px solid rgba($brand-black, .4);
    }
  }
}

.btn-primary {
  height: 50px;
  padding-right: 20px;
  padding-left: 20px;
  border: none;
  background: $brand-primary;
  color: $brand-white;
  -webkit-box-shadow: -2px 10px 20px -1px rgba($brand-primary, .4);
  -moz-box-shadow: -2px 10px 20px -1px rgba($brand-primary, .4);
  -o-box-shadow: -2px 10px 20px -1px rgba($brand-primary, .4);
  box-shadow: -2px 10px 20px -1px rgba($brand-primary, .4);
  &:hover, &:focus, &:active {
    color: $brand-white;
    background: lighten($brand-primary, 5%) !important;
    outline: none;
  }
}

input, textarea {
  color: #000;
}

.placeholder {
  color: #aaa;
}

.animate-box {
  .js & {
    opacity: 0;
  }
}
